<template>
  <van-row class="online-filter-box" type="flex" align="center" :justify="supportSort ? 'start' : 'end'">
    <!-- <span v-show="supportSort" class="title">综合排序</span> -->
    <div v-show="supportSort" class="sort-box">
      <slot name="sort" />
    </div>
    <slot v-if="supportFilter" name="filter" />
    <div v-show="supportSort && !supportFilter" class="divider" />
    <!-- <van-icon name="filter-o" style="height: 16px;" size="14px" @click="showFilter = !showFilter">
      筛选
    </van-icon> -->
    <span style="font-size:14px; flex-shrink: 0" @click="showFilter = !showFilter" :style="{'margin-left': supportFilter ? '8px' : undefined}">
      筛选
      <i class="mobile-font icon-filter" style="font-size: 14px;margin-left: 1px;"></i>
    </span>
    
    <!-- 过滤窗口 -->
    <van-popup
      class="filter-box"
      v-model="showFilter"
      round
      position="bottom"
      get-container="body"
      :style="{ height: '80%' }"
      closeable
    >
      <van-row style="padding: 16px 24px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box;">
        <van-col :span="24" style="margin-bottom: 12px;">
          <div style="width: 100%; text-align: center; font-size: 14px; color: #333333;">筛选</div>
        </van-col>
        <!-- 过滤组件 -->
        <van-col :span="24" style="flex-grow: 1; height: 100px;">
          <slot />
        </van-col>
        <van-col :span="24">
          <van-row type="flex" style="flex-wrap: nowrap;">
            <van-button class="reset-btn" style="width: 104px; height: 40px;" @click="onReset()">重置</van-button>
            <van-button class="submit-btn" color="#FF7700" style="height: 40px;" @click="onRefresh()">确定</van-button>
          </van-row>
        </van-col>
      </van-row>
    </van-popup>
  </van-row>
</template>

<script>
export default {
  name: 'onlineCustomFilterBox',
  props: {
    supportSort: {
      type: Boolean,
      default: true
    },
    supportFilter: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showFilter: false
    }
  },
  methods: {
    onRefresh () {
      this.$emit('refresh');
      this.showFilter = false;
    },
    onReset () {
      this.$emit('reset');
      this.showFilter = false;
    }
  }
}
</script>

<style scoped>
  .online-filter-box {
    height: 40px;
    display: flex;
    align-items: center;
  }
  .title {
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
    height: 40px;
    line-height: 40px;
  }
  .sort-box {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100px;
    height: 40px;
    line-height: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap
  }
  .divider {
    width: 1px;
    height: 18px;
    background: #E8E8E8;
    margin: 0px 8px;
  }
  .filter-box >>> .van-popup__close-icon {
    color: #333333;
    font-size: 20px;
  }
  .reset-btn {
    flex-grow: 0;
    flex-shrink: 0;
    width: 105px;
  }
  .submit-btn {
    flex-grow: 1;
    flex-shrink: 1;
    width: 105px;
    margin-left: 8px;
  }
  .van-icon-filter-o:before {
    content: none;
  }
  .van-icon-filter-o:after {
    content: '\e6b5';
  }
  .van-icon-sort:before {
    content: none;
  }
  .van-icon-sort:after {
    content: '\e721';
  }
</style>
